<template>
  <div class="home">
    <!-- 头部导航栏 -->
    <div class="home_nav">
      <div class="home_left">
        <img
          src="https://ssr-static.msstatic.com/h5/mobile/@public-online/imgs/header/logo.acc780e7a19f22c1d8e89805488fcfef.png"
          alt=""
        />
      </div>
      <router-link tag="div" to="/search" class="home_right">
        <span class="iconfont icon-sousuo"></span>
      </router-link>
    </div>

    <!-- tab导航栏 -->
    <div class="bannerbox">
      <van-tabs animated>
        <!-- 首页内容 -->
        <van-tab :title="'首页'">
          <div class="swiper">
            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="white"
            >
              <van-swipe-item v-for="item in swiper" :key="item.id">
                <img :src="item.img" alt="" />
              </van-swipe-item>
            </van-swipe>
            <div
              class="home_lists"
              v-for="(item, index) in home_lists"
              :key="index"
            >
              <div class="home_lists_top">
                <div class="home_lists_top_img">
                  <img :src="item.home_lists_top_img" alt="" />
                  <p>{{ item.home_lists_top_img_name }}</p>
                </div>
              </div>
              <div class="home_lists_content">
                <router-link
                  tag="div"
                  :to="'/details?id=' + i.id"
                  class="home_item"
                  v-for="i in item.home_lists_content"
                  :key="i.id"
                >
                  <div class="home_item_img">
                    <img :src="i.img" alt="" />
                    <p>{{ i.p }}</p>
                  </div>
                  <div class="home_item_title">{{ i.title }}</div>
                  <div class="home_item_bottom">
                    <div class="home_item_name">{{ i.name }}</div>
                    <div class="home_item_hot">
                      <div class="home_item_hot_img">
                        <img
                          src="http://a.msstatic.com/huya/mobile/img/crowd_2017_97bb042.png"
                          alt=""
                        />
                      </div>
                      <p>{{ i.hot }}</p>
                    </div>
                  </div>
                </router-link>
              </div>
            </div>
            <!-- 底部 -->
            <div class="foot">
              <p>版权所有 © 2012-现在 huya.com</p>
              <p>粤ICP备16120983号</p>
              <p>APP下载&nbsp;|&nbsp;意见反馈&nbsp;|&nbsp;我要直播</p>
            </div>
          </div>
        </van-tab>
        <!-- 王者荣耀 -->
        <van-tab :title="'王者荣耀'">
          <div class="home_lists">
            <div class="home_lists_content">
              <router-link
                tag="div"
                :to="'/details?id=' + item.id"
                class="home_item"
                v-for="item in wzry"
                :key="item.id"
              >
                <div class="home_item_img">
                  <img :src="item.img" alt="" />
                  <p>{{ item.p }}</p>
                </div>
                <div class="home_item_title">{{ item.title }}</div>
                <div class="home_item_bottom">
                  <div class="home_item_name">{{ item.name }}</div>
                  <div class="home_item_hot">
                    <div class="home_item_hot_img">
                      <img
                        src="http://a.msstatic.com/huya/mobile/img/crowd_2017_97bb042.png"
                        alt=""
                      />
                    </div>
                    <p>{{ item.hot }}</p>
                  </div>
                </div>
              </router-link>
            </div>
          </div>
          <!-- 底部 -->
          <div class="foot">
            <p>版权所有 © 2012-现在 huya.com</p>
            <p>粤ICP备16120983号</p>
            <p>APP下载&nbsp;|&nbsp;意见反馈&nbsp;|&nbsp;我要直播</p>
          </div>
        </van-tab>
        <!-- 绝地求生 -->
        <van-tab :title="'绝地求生'">
          <div class="home_lists">
            <div class="home_lists_content">
              <router-link
                tag="div"
                :to="'/details?id=' + item.id"
                class="home_item"
                v-for="item in jdqs"
                :key="item.id"
              >
                <div class="home_item_img">
                  <img :src="item.img" alt="" />
                  <p>{{ item.p }}</p>
                </div>
                <div class="home_item_title">{{ item.title }}</div>
                <div class="home_item_bottom">
                  <div class="home_item_name">{{ item.name }}</div>
                  <div class="home_item_hot">
                    <div class="home_item_hot_img">
                      <img
                        src="http://a.msstatic.com/huya/mobile/img/crowd_2017_97bb042.png"
                        alt=""
                      />
                    </div>
                    <p>{{ item.hot }}</p>
                  </div>
                </div>
              </router-link>
            </div>
          </div>
          <!-- 底部 -->
          <div class="foot">
            <p>版权所有 © 2012-现在 huya.com</p>
            <p>粤ICP备16120983号</p>
            <p>APP下载&nbsp;|&nbsp;意见反馈&nbsp;|&nbsp;我要直播</p>
          </div>
        </van-tab>
        <!-- 英雄联盟 -->
        <van-tab :title="'英雄联盟'">
          <div class="home_lists">
            <div class="home_lists_content">
              <router-link
                tag="div"
                :to="'/details?id=' + item.id"
                class="home_item"
                v-for="item in yxlm"
                :key="item.id"
              >
                <div class="home_item_img">
                  <img :src="item.img" alt="" />
                  <p>{{ item.p }}</p>
                </div>
                <div class="home_item_title">{{ item.title }}</div>
                <div class="home_item_bottom">
                  <div class="home_item_name">{{ item.name }}</div>
                  <div class="home_item_hot">
                    <div class="home_item_hot_img">
                      <img
                        src="http://a.msstatic.com/huya/mobile/img/crowd_2017_97bb042.png"
                        alt=""
                      />
                    </div>
                    <p>{{ item.hot }}</p>
                  </div>
                </div>
              </router-link>
            </div>
          </div>
          <!-- 底部 -->
          <div class="foot">
            <p>版权所有 © 2012-现在 huya.com</p>
            <p>粤ICP备16120983号</p>
            <p>APP下载&nbsp;|&nbsp;意见反馈&nbsp;|&nbsp;我要直播</p>
          </div>
        </van-tab>
        <!-- 星秀 -->
        <van-tab :title="'星秀'">
          <div class="home_lists">
            <div class="home_lists_content">
              <router-link
                tag="div"
                :to="'/details?id=' + item.id"
                class="home_item"
                v-for="item in xx"
                :key="item.id"
              >
                <div class="home_item_img">
                  <img :src="item.img" alt="" />
                  <p>{{ item.p }}</p>
                </div>
                <div class="home_item_title">{{ item.title }}</div>
                <div class="home_item_bottom">
                  <div class="home_item_name">{{ item.name }}</div>
                  <div class="home_item_hot">
                    <div class="home_item_hot_img">
                      <img
                        src="http://a.msstatic.com/huya/mobile/img/crowd_2017_97bb042.png"
                        alt=""
                      />
                    </div>
                    <p>{{ item.hot }}</p>
                  </div>
                </div>
              </router-link>
            </div>
          </div>
          <!-- 底部 -->
          <div class="foot">
            <p>版权所有 © 2012-现在 huya.com</p>
            <p>粤ICP备16120983号</p>
            <p>APP下载&nbsp;|&nbsp;意见反馈&nbsp;|&nbsp;我要直播</p>
          </div>
        </van-tab>
        <!-- 吃喝玩乐 -->
        <van-tab :title="'吃喝玩乐'">
          <div class="home_lists">
            <div class="home_lists_content">
              <router-link
                tag="div"
                :to="'/details?id=' + item.id"
                class="home_item"
                v-for="item in chwl"
                :key="item.id"
              >
                <div class="home_item_img">
                  <img :src="item.img" alt="" />
                  <p>{{ item.p }}</p>
                </div>
                <div class="home_item_title">{{ item.title }}</div>
                <div class="home_item_bottom">
                  <div class="home_item_name">{{ item.name }}</div>
                  <div class="home_item_hot">
                    <div class="home_item_hot_img">
                      <img
                        src="http://a.msstatic.com/huya/mobile/img/crowd_2017_97bb042.png"
                        alt=""
                      />
                    </div>
                    <p>{{ item.hot }}</p>
                  </div>
                </div>
              </router-link>
            </div>
          </div>
          <!-- 底部 -->
          <div class="foot">
            <p>版权所有 © 2012-现在 huya.com</p>
            <p>粤ICP备16120983号</p>
            <p>APP下载&nbsp;|&nbsp;意见反馈&nbsp;|&nbsp;我要直播</p>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 底部固定 -->
    <div class="home_bottom">
      <div class="home_bottom_item con">
        <span class="iconfont icon-zhibo1"></span>
        <p>直播</p>
      </div>
      <router-link tag="div" to="/info" class="home_bottom_item">
        <span class="iconfont icon-zixun1"></span>
        <p>咨询</p>
      </router-link>
      <router-link tag="div" to="/follow" class="home_bottom_item">
        <span class="iconfont icon-guanzhu1"></span>
        <p>关注</p>
      </router-link>
      <router-link tag="div" to="/user" class="home_bottom_item">
        <span class="iconfont icon-wode"></span>
        <p>我的</p>
      </router-link>
    </div>
  </div>
</template>

<script>
import { getHomeData, getTotalData } from "../api/home.js";
export default {
  data() {
    return {
      // 轮播图数据空数据
      swiper: null,
      home_lists: null,
      //各个数据
      wzry: null,
      jdqs: null,
      yxlm: null,
      xx: null,
      chwl: null,
      video_1: [],
    };
  },
  created() {
    // 获取页面数据
    getHomeData().then((data) => {
      // console.log(data.wzry);
      this.swiper = data.data;
      this.home_lists = data.home_lists;
      this.wzry = data.wzry;
      this.jdqs = data.jdqs;
      this.yxlm = data.yxlm;
      this.xx = data.xx;
      this.chwl = data.chwl;
    });
    getTotalData().then((data) => {
      if (!window.localStorage.total) {
        window.localStorage.setItem("total", JSON.stringify(data.data));
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: relative;
}
// 头部导航栏
.home_nav {
  display: flex;
  padding: 15px;
  justify-content: space-between;
  align-items: center;
  .home_left {
    width: 100px;
    height: 30px;
    background-size: 100% 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .home_right {
    padding: 6px 14px;
    background-color: #f4f4f4;
    border-radius: 15px;
  }
  border-bottom: 1px solid #ededed;
}

// tab导航栏
// 首页内容
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.bannerbox {
  .swiper {
    margin-top: 14px;
    img {
      width: 100%;
      height: 123px;
    }
  }
}
.home_lists {
  .home_lists_top {
    padding: 10px;
    padding-bottom: 0;
    .home_lists_top_img {
      display: flex;
      align-items: center;
      img {
        width: 25px;
        height: 25px;
      }
      p {
        text-indent: 5px;
        font-size: 16px;
      }
    }
  }
  .home_lists_content {
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .home_item {
      width: 48%;
      margin-top: 10px;
      .home_item_img {
        width: 100%;
        height: 99px;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        p {
          font-size: 12px;
          position: absolute;
          z-index: 1;
          top: 3px;
          right: 3px;
          padding: 2px 6px;
          vertical-align: middle;
          color: #eee;
          background: rgba(44, 49, 54, 0.7);
        }
      }
      .home_item_title {
        width: 100%;
        padding: 3px 0;
        font-size: 13px;
        color: #000;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: normal;
      }
      .home_item_bottom {
        display: flex;
        justify-content: space-between;
        height: 13px;
        line-height: 13px;
        font-size: 11px;
        color: #999;
        padding: 3px 0;
        .home_item_name {
          max-width: 40%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: normal;
        }
        .home_item_hot {
          display: flex;
          align-items: center;
          .home_item_hot_img {
            width: 13px;
            height: 13px;
            margin-right: 6px;
            margin-top: -3px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
/* 底部 */
.foot {
  text-align: center;
  margin-top: 32px;
  font-size: 14px;
  color: #999999;
  padding-bottom: 60px;
}
.foot p {
  margin-bottom: 12px;
}
// 底部固定
.home_bottom {
  display: flex;
  background-color: #ffffff;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  .home_bottom_item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    span {
      font-size: 20px;
    }
    p {
      margin-top: 3px;
    }
    &.con {
      color: #ffa200;
    }
  }
}
</style>
